<script lang="ts" setup>
import { BuildTaskRecord } from "./model";
import { ref } from "vue";
import TaskList from "./components/TaskList.vue";
import TaskDetail from "./components/TaskDetail.vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
const curTaskDetail = ref<BuildTaskRecord>();

const handleOnCheck = (rec: BuildTaskRecord) => {
  curTaskDetail.value = rec;
};
</script>

<template>
  <el-config-provider :locale="zhCn">
    <div class="container">
      <div class="left">
        <TaskList @onChecked="handleOnCheck" />
      </div>
      <div class="right">
        <TaskDetail :task="curTaskDetail" />
      </div>
    </div>
  </el-config-provider>
</template>

<style lang="scss" scoped>
.container {
  max-width: 1600px;
  display: flex;
  overflow: auto;
  height: 100vh;
  margin: 0 auto;
  .left {
    flex: 0 0 auto;
    width: 40%;
    min-width: 470px;
    border-right: solid 1px #ccc;
    height: 100%;
    padding: 24px 0;
    box-sizing: border-box;
  }
  .right {
    padding: 24px 0;
    flex: 1;
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
}
</style>
